<template>
  <div class="shoppingCart">
    <div class="list" v-for="(item, i) in goodsList" :key="item.id">
      <div class="list-bgc">
        <mt-switch
          v-model="$store.getters.getGoodsSelect[item.id]"
          @change="selectChange(item.id, $store.getters.getGoodsSelect[item.id])"
        ></mt-switch>
        <img :src="item.img_url" alt />
        <div class="list-right">
          <p class="list-top">{{ item.title }}</p>
          <p class="list-bottom">
            <span>￥{{ item.price }}</span>
            <cartNum :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></cartNum>
            <a href="#" @click.prevent="remove(item.id, i)">删除</a>
          </p>
        </div>
      </div>
    </div>
    <div class="total">
      <div class="left">
        <p>总计(不含运费)</p>
        <p>
          已勾选商品
          <span>{{ $store.getters.getGoodsSelectCount.count }}</span>件，总价：
          <span>￥{{ $store.getters.getGoodsSelectCount.price }}</span>
        </p>
      </div>
      <div class="right">
        <mt-button type="danger">去结算</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import cartNum from "../../components/number/CartNumber";
export default {
  name: "shoppingCart",
  components: {
    cartNum
  },
  data() {
    return {
      goodsList: []
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      // 获取所有商品，把 id 存起来给后台，目前没有后台，自己存数据
      let ids = [];
      this.$store.state.cart.forEach(item => ids.push(item.id));
      ids.join(",");
      if (ids.length <= 0) {
        return;
      }
      this.goodsList = this.$store.state.cart;
    },
    remove(id, index) {
      // 点击删除，删除 store 商品,使用 index 来删除页面上的商品信息
      this.$messagebox
        .confirm("确定删除此商品吗?")
        .then(action => {
          this.goodsList.splice(index, 1);
          this.$store.commit("removeIdCart", id);
        })
        .catch(err => {});
    },
    selectChange(id, selectval) {
      // 点击开关获取选中状态，放到store里面，进行存储
      this.$store.commit("updateGoodsSelected", { id, selected: selectval });
    }
  }
};
</script>

<style lang="scss" scoped>
.shoppingCart {
  .list {
    background: #c9c9c9;
    padding: 6px;
    .list-bgc {
      background: white;
      display: flex;
      padding: 6px;
      box-shadow: 0 0 8px #919191;
    }
    img {
      height: 70px;
      //width: 60px !important;
      margin-top: 10px;
    }
    .list-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      padding: 10px 2px;
      .list-top {
        font-weight: 800;
        font-size: 14px;
      }
      .list-bottom {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        span {
          color: red;
        }
        a {
          color: #226aff;
          text-decoration: none;
        }
      }
    }
  }
  .total {
    margin: 10px 6px;
    padding: 10px;
    box-shadow: 0 0 8px #919191;
    display: flex;
    justify-content: space-between;
    .left {
      p {
        line-height: 40px;
        color: #919191;
        span {
          font-weight: bold;
          color: red;
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      button {
        text-align: center;
      }
    }
  }
}
</style>